<script setup>
defineProps({
    image: {
        type: String,
        required: true,
    },
    title: {
        type: String,
        // required: true,
    },
    // description: {
    //     type: Array,
    //     // required: true,
    // },
    action: {
        type: Array,
        route: String,
        label: String,
        color: String,
        required: true,
    },
});
</script>
<template>
    <div class="back back-background" :style="`background-image: url(${image});background-size: cover;width:100%`">
        <div class="card-body pt-7 text-center">
            <h6 class="text-white" v-html="title"></h6>
            <!-- <h6 class="text-white opacity-8" v-for="(desc, index) in description.split('  ')" :key="index">
                {{ desc }}
            </h6> -->
            <!-- <div v-for="(desc, indexs) in description.split('  ')" :key="indexs">
                <h6 class="text-white font-weight-normal pe-3 d-flex align-items-center"><i class="material-icons me-1 text-white">check_circle_outline</i>{{ desc }}<br /></h6>
            </div> -->

            <div class="buttons-group">
                <a v-for="({ route, color, label }, index) of action" :key="index" :href="route" target="_blank" class="btn btn-sm mt-3 inline-block ms-1" :class="`${color ? `btn-${color}` : 'btn-white'}`">{{ label }}</a>
            </div>
        </div>
    </div>
</template>
<style>
.rotating-card-container .card .back:after,
.rotating-card-container .card .front:after {
    background-image: linear-gradient(195deg, #627594, #a8b8d8);
    opacity: 0.85;
}
</style>
